<template>
  <div class="assets_detail">
    <div class="assets_H">
      <span>已发布卡列表</span>
      <el-form :inline="true" :model="integral" class="demo-form-inline">
        <el-form-item label="卡名称：">
          <el-input
            v-model="integral.name"
            placeholder="请输入卡名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="发行状态：">
          <el-select v-model="integral.status" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="serach">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="assets_B">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:validityTypeDict="{ scope }">
          <div v-if="scope.row.cardType == 9">{{scope.row.usableCount}}天</div>
          <div v-else>{{scope.row.validityTypeDict}}</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button
            size="small"
            type="warning"
            v-if="scope.row.status != 3 && scope.row.status!=5"
            @click="disableClick(scope.row.assetId)"
            >禁用</el-button
          >
          <el-button
            size="small"
            v-if="scope.row.status == 3 && scope.row.status!=5"
            @click="undisableClick(scope.row.assetId)"
            >取消禁用</el-button
          >
          <el-button size="small" @click="lookDetail(scope.row)"
            >查看</el-button
          >
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
import { cardList, updateStatus, adminDict } from "@/api/merchants";
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "publicCard",
  components: {},
  mixins: [handlePageMixin],
  data() {
    return {
      id: "",
      assetId: "",
      info: {},
      loading: false,
      integral: {
        name: "",
        status: "", //状态(1待上链 2 流通中 3异常  4暂停流通 5终止)
      },
      options: [],
      tableData: [],
      tableColumn: [
        { prop: "assetId", label: "资产编号", width: "140" },
        { prop: "name", label: "卡名称" },
        { prop: "cardTypeDict", label: "卡类型", width: "100" },
        { prop: "issueTotal", label: "发行总量" },
        { prop: "statusDict", label: "资产发行状态", width: "120" },
        { prop: "validityTypeDict", slot: true, slotName: "validityTypeDict",label: "发行有效期", width: "160" },
        { prop: "surplusBalanceMoney", label: "剩余充值金额（¥）", width: "120" },
        { prop: "freezeMoney", label: "剩余冻结余额（¥）" },
        { label: "操作", slot: true, slotName: "operate", width: "190",tip: 'true' },
      ],
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    let query = this.$route.query;
    this.id = query.id;
    this.getlinkagelist();
    this.getList();
  },
  methods: {
    getlinkagelist() {
      //获取字典
      const params = {
        dictType: "asset_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: "",
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
      });
    },
    serach() {
      console.log(this.integral);
      this.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        merchantId: this.id,
        name: this.integral.name,
        status: this.integral.status,
      };
      this.loading = true;
      cardList(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            if(item.surplusBalanceMoney==''){
                item.surplusBalanceMoney = 0
            }
            if(item.freezeMoney==''){
                item.freezeMoney = 0
            }
            // if (item.validityType == 1) {
            //   item.validitytxt = item.validityStartTime + "~" + "长期有效";
            // } else {
            //   item.validitytxt =
            //     item.validityStartTime + "~" + item.validityEndTime;
            // }
          });
          console.log(records);
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    disableClick(e) {
      //禁用
      let assetId = e;
      this.$confirm("是否禁用?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          var params = {
            assetId: assetId,
            status: 3,
            // merchantId: this.id,
          };
          updateStatus(params).then((res) => {
            this.$message({
              message: "禁用成功",
              type: "success",
            });
            this.getList();
          });
        })
        .catch();
    },
    undisableClick(e) {
      //取消禁用
      let assetId = e;
      this.$confirm("是否取消禁用?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          var params = {
            assetId: assetId,
            status: 4,
            // merchantId: this.id,
          };
          updateStatus(params).then((res) => {
            this.$message({
              message: "取消禁用成功",
              type: "success",
            });
            this.getList();
          });
        })
        .catch();
    },
    lookDetail(e) {
      console.log(e);
      this.$router.push({
        path: "/merchants/card-detail",
        query: {
          merchantId: this.id,
          assetId: e.assetId,
          name: e.name,
        },
      });
    },
  },
};
</script>
<style scoped>
.assets_detail {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 20px;
}
.assets_H {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
  margin-bottom: 0;
}
</style>